<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的实践</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background: #58a;
    }
  </style>
</head>
<body>
<div id="ad">
  <script>
    window.onload = function (){
      //需求1：点击div 2s后颜色变成粉色
      //获取元素
      let ad = document.getElementById('ad');
      //绑定事件
      ad.addEventListener("click",function (){
        //加定时器
        setTimeout(() => {
          let _this = this;
          console.log(this)
          //修改背景颜色
          this.style.background = 'pink';
        },2000)
      })
      //需求2：从数组中返回偶数的元素
      const arr = [1,6,9,10,34,56];
      // const result = arr.filter(function (item){
      //   if (item % 2 === 0){
      //     return true;
      //   }else {
      //     return false;
      //   }
      // });
      const result = arr.filter(item => item % 3 === 0)

      console.log(result);

      //箭头函数适合与this无关的回调，定时器，数组的方法回调
      //箭头函数不适合与this有关回调，事件回调，对象的方法
    }

  </script>
</div>
</body>
</html>